<route lang="json5">
  {
    style: {
      navigationBarTitleText: '修改支付密码',
    },
  }
  </route>
<template>
  <view class="page">
    <view class="form-container">
      <view class="title">修改支付密码</view>


      <!-- <view class="form-item">
        <uni-icons type="person" size="20" color="#999"/>
        <input 
          type="text"
          readonly
          v-model="formData.id"
          placeholder="请输入ID"
          class="input"
        />
        <text class="tip-text">输入会员ID</text>
      </view>
-->
      <view class="form-item">
        <uni-icons type="phone" size="20" color="#999" />
        <input type="number" v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" class="input" />
      </view>

      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999" />
        <input :type="showPassword ? 'text' : 'password'" v-model="formData.password" placeholder="请输入密码"
          class="input" />
        <uni-icons :type="showPassword ? 'eye-filled' : 'eye-slash-filled'" size="20" color="#999"
          @click="togglePassword" />
      </view>

      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999" />
        <input :type="showPassword ? 'text' : 'password'" v-model="formData.newpassword" placeholder="请再次输入密码"
          class="input" />
      </view>




      <button class="submit-btn" @click="handleSubmit">提交</button>

      <view class="form-text">提交信息后，请电话联系管理员审核，电话：{{ adminTel }}</view>


    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { postApplyFindPayPwdAPI, getAdminTelAPI } from '@/service/index/index';
import { useUserStore } from '@/store';

const userStore = useUserStore();

const showPassword = ref(false);
const showPayPassword = ref(false);

const formData = reactive({
  id: userStore.userInfo.id,
  mobile: '',
  password: '',
  newpassword: '',

});

const goBack = () => {
  uni.navigateBack();
};

const goLogin = () => {
  uni.navigateTo({
    url: '/pages/login/index'
  });
};
const adminTel = ref('');
const getAdminTel = async () => {
  const res = await getAdminTelAPI();
  if (res.code === 1 && res.data) {
    adminTel.value = res.data.admin_tel;
  }
};
const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

const togglePayPassword = () => {
  showPayPassword.value = !showPayPassword.value;
};

const handleSubmit = async () => {

  if (!formData.id) {
    uni.showToast({ title: '请输入ID', icon: 'none' });
    return;
  }
  if (!/^\d+$/.test(formData.id)) {
    uni.showToast({ title: 'ID输入不正确', icon: 'none' });
    return;
  }
  if (!formData.mobile) {
    uni.showToast({ title: '请输入手机号', icon: 'none' });
    return;
  }
  if (!/^1\d{10}$/.test(formData.mobile)) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
    return;
  }
  if (!formData.password) {
    uni.showToast({ title: '请输入密码', icon: 'none' });
    return;
  }
  if (formData.password !== formData.newpassword) {
    uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
    return;
  }
  const res = await postApplyFindPayPwdAPI({
    id: formData.id,
    mobile: formData.mobile,
    password: formData.password,
    newpassword: formData.newpassword
  })
  if (res.code === 1) {
    uni.showToast({ title: '提交成功,联系管理员审核！', icon: 'success' });
  } else {
    uni.showToast({ title: res.msg, icon: 'none' });
  }
};

const openPrivacyPolicy = () => {
  uni.navigateTo({
    url: '/pages/privacy/index'
  });
};

const openUserAgreement = () => {
  uni.navigateTo({
    url: '/pages/agreement/index'
  });
};

//#ifdef APP-PLUS || MP-WEIXIN
onLoad(() => {
  getAdminTel();
});
//#endif

//#ifdef H5
onMounted(() => {
  getAdminTel();
});
//#endif
</script>

<style scoped>
page {
  height: 100%;
}


.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  text-align: left;
  margin-left: 10rpx;
  margin-bottom: 30rpx;
}


.page {
  min-height: 100%;
  background-color: #FFFFFF;
  padding: 0 30rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  margin: 0 -30rpx;
}

.nav-left {
  width: 100rpx;
  display: flex;
  align-items: center;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.nav-right {
  width: 100rpx;
  text-align: right;
  font-size: 14px;
  color: #FF6B44;
}

.form-container {
  padding-top: 60rpx;
}

.form-item {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  border: 1px solid #EEEEEE;
}

.input {
  flex: 1;
  height: 100%;
  margin-left: 20rpx;
  font-size: 14px;
}

.tip-text {
  font-size: 12px;
  color: #999999;
  margin: 0 20rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  margin-top: 60rpx;
  background: #1890ff;
  border-radius: 45rpx;
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
}

.agreement {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  font-size: 20rpx;

}

.agreement-text {
  font-size: 12px;
  color: #999999;
}

.agreement-link {
  font-size: 12px;
  color: #1890ff;
}

.form-text {
  font-size: 12px;
  color: #999999;
  margin: 30rpx 0;
  margin-left: 10rpx;
  padding-bottom: 30rpx;

}
</style>
